<template>
  <el-row>
    <el-col :span="24">
      <div class="box">
        <div class="box-header">
          <el-col :span="3">
            <h3 class="box-title" style="line-height: 40px;float: left;">
              结题材料分组
            </h3>
          </el-col>
          <el-col :span="21">
            <el-button
              class="btn-link-large add-btn"
              @click="
                () => {
                  showAddDialog = true
                }
              "
              >新建分组</el-button
            >
            <el-button
              round
              style="background: azure;float:right; margin-right: 50px;"
              @click="goback()"
              >返 回</el-button
            >
          </el-col>
        </div>
        <!-- 一级菜单 -->
        <div class="box-body">
          <el-table
            :data="table"
            v-loading="loading"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="id"
              label="ID"
              width="100"
              sortable
            ></el-table-column>
            <el-table-column
              prop="title"
              label="分组名称"
              sortable
            ></el-table-column>
            <el-table-column
              prop="no"
              label="分组编号"
              sortable
            ></el-table-column>
            <el-table-column label="操作" width="350">
              <template slot-scope="scope">
                <el-button
                   v-popover:popover5
                    style="background: #367fa9;color: white;"
                  size="small"
                  @click.stop="readExpert(scope.row)"
                  >评审详情</el-button>
                  <el-button
                   v-popover:popover5
                  type="primary"
                  size="small"
                  icon="el-icon-edit"
                  @click.stop="editGroup(scope.row)"
                  >修改</el-button>
                <router-link
                  :to="{
                    name: 'steditgroup',
                    params: {
                      pro_id: scope.row.project_id,
                      gro_id: scope.row.id,
                      status: scope.row.status
                    }
                  }"
                >
                  <el-button
                    v-popover:popover5
                    style="background: rgb(72, 156, 32);color: white;"
                    size="small"
                    icon="el-icon-plus"
                    >分配</el-button
                  >
                </router-link>
                 <el-button
                   v-popover:popover5
                  type="danger"
                  size="small"
                  icon="el-icon-delete"
                  @click.stop="deletegp(scope.row)"
                  >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="goPage"
            :current-page="nowPage"
            layout="prev, pager, next"
            :page-count="allPage"
            style="float: right;"
          ></el-pagination>
        </div>
      </div>
    </el-col>

    <el-dialog
      title="新建分组"
      :visible.sync="showAddDialog"
      width="30%"
      :before-close="handleClose"
    >
      <el-form label-width="80px">
        <el-form-item label="分组名称">
          <el-input v-model="group.title"></el-input>
        </el-form-item>
        <el-form-item label="分组编号">
          <el-input v-model="group.no"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddDialog = false">取 消</el-button>
        <el-button type="primary" @click="addGroup()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改分组"
      :visible.sync="showeditDialog"
      width="30%"
      :before-close="handleClose"
    >
      <el-form label-width="80px">
        <el-form-item label="分组名称">
          <el-input v-model="editgroup.title"></el-input>
        </el-form-item>
        <el-form-item label="分组编号">
          <el-input v-model="editgroup.no"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showeditDialog = false">取 消</el-button>
        <el-button type="primary" @click="groupRevise()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="评审详情" :visible.sync="dialogTableVisible" :before-close="handleClose">
      <el-table :data="expertTable">
        <el-table-column property="name" label="姓名" width="200"></el-table-column>
        <el-table-column property="status" label="评审状态" :formatter="showexpert"></el-table-column>
      </el-table>
    </el-dialog>
  </el-row>
</template>

<script>
import http from './../../../../assets/js/http'
export default {
  data() {
    return {
      nowPage: 1,
      allPage: 1,
      loading: true,
      showeditDialog: false,
      expertTable: [],
      dialogTableVisible: false,
      editgroup:{
        title: '',
        no: '',
        id:''
      },
      table: [],
      statusList:{
        0: {
          name: '已提交'
        },
        1: {
          name: '未提交'
        }
      },
      showAddDialog: false,
      group: {
        title: '',
        no: ''
      }
    }
  },
  created() {
    _g.closeGlobalLoading()
    this.init()
  },
  methods: {
    showexpert(row){
      return this.statusList[row.status]['name']  
    },
    goback() {
      router.go(-1)
    },
    goPage(to) {
      this.nowPage = to
      this.getTable()
    },
    getTable() {
      this.loading = true
      let data = {
        page: this.nowPage,
        project_id: this.$route.params.id
      }
      this.apiPost('admin/Report/endGroupList', data).then(res => {
        this.handelResponse(res, data => {
          this.table = data.data
          this.loading = false
          this.allPage = Math.ceil(data.total / data.per_page)
        })
      })
    },
    editGroup(row) {
        // this.editgroup = {}
        this.showeditDialog = true
        var editgroup = JSON.parse(JSON.stringify(row))
        this.editgroup = editgroup
        
    },
    readExpert(row) {
      this.dialogTableVisible = true
      let data = {
        ex: 2,
        id: row.id
      }
      this.apiPost('admin/Report/ReadExpert',data).then(res =>{
        this.handelResponse(res,data =>{
          // console.log(res.data)
          this.expertTable = res.data
        })
      })
    },
    groupRevise() {
         let data = {
          project_id: this.$route.params.id,
          id: this.editgroup.id,
          title: this.editgroup.title,
          no: this.editgroup.no
        }
        this.apiPost('admin/Report/endReviseGroup', data).then(res => {
        this.handelResponse(res, data => {
          _g.toastMsg('success',res.data)
          this.showeditDialog = false
          // this.editgroup = {}
          // console.log(this.table)
          this.getTable()
        })
      })
    },
    deletegp(row) {
      // console.log(row.id) 
      let data = {
        id: row.id
      }
      // console.log(data)
      this.apiPost('admin/Report/endDeleteGroup', data).then(res => {
        this.handelResponse(res, data => {
          _g.toastMsg('success',res.data)
          this.getTable()
        })
      })
    },
    addGroup() {
      let data = {
        project_id: this.$route.params.id,
        title: this.group.title,
        no: this.group.no
      }
      this.apiPost('admin/Report/endGroupWrite', data).then(res => {
        this.handelResponse(res, data => {
          _g.toastMsg('success', '分组添加成功')
          this.group = {}
          this.showAddDialog = false
          this.getTable()
        })
      })
    },
    init() {
      this.getTable()
    }
  },
  mixins: [http]
}
</script>
<style scoped>
.box {
  position: relative;
  border-radius: 3px;
  background: #fff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #3c8dbc;
}
.box-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  padding: 10px;
  min-height: 0.01%;
  overflow-x: auto;
}
.box-header {
  height: 34px;
  line-height: 34px;
  color: #444;
  display: block;
  padding: 10px;
  position: relative;
}
.button-group {
  margin-left: 13px;
}
.pull-left {
  float: left;
}
.pull-right {
  float: right;
  /*margin-right: 50px;*/
}
.box-title {
  font-weight: 700;
  letter-spacing: 3px;
  display: inline-block;
  font-size: 18px;
  margin: 0;
}
.header-button {
  background-color: #3c8dbc;
  border-color: #367fa9;
}
.table-header {
  font-weight: bold;
}
.el-button--small {
  padding: 7px 9px;
}
.el-table .showwarn {
  background: oldlace;
}
.edit-btn {
  /*background: #367fa9;*/
  width: 60px;
  height: 28px;
}
.add-btn {
  background: #367fa9;
  margin: 0 10px;
}
.add-btn:hover {
  /* background: #367fa9; */
  background: #367fa9;
}
/*  .btn-link-large {
    padding: 13px 12px;
    font-size: 14px;
}*/
/* 选中某行时的背景色*/
.el-table__body tr.current-row > td {
  background-color: #92cbf1 !important;
}

/*鼠标移入某行时的背景色*/
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #92cbf1;
}
</style>
